import { View } from "@tarojs/components";
import { XmPullRefresh, XmNoData, XmImage } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect } from "react";
import { Tabs, Flex } from "@taroify/core"
import { XmDialogCalendar } from "@/components/public";
import { usePagingQuery } from "@/path/hooks";
import "./index.scss"
import { getWalletPayList } from '@/path/api/wallet/index'
import dayjs from "dayjs";
import Navbar from "@/components/ui/navbar";

function Index() {
  const { pagingInfo, pagingParams, setPagingParams, initPagingQuery, loadPagingMore } = usePagingQuery<any, any>(getWalletPayList, {
    type: '',
    endTime: dayjs(new Date()).format("YYYY-MM-DD"),
    startTime: dayjs().subtract(6, 'day').format("YYYY-MM-DD"),
  })
  // 改变类型
  const changeType = (newType) => {
    console.log(newType)
    setPagingParams({
      ...pagingParams,
      type: newType,
      endTime: pagingParams.endTime,
      startTime: pagingParams.startTime,
    })
    initPagingQuery(false)
  };
  const onSetTime = () => {
    XmDialogCalendar({
      title: "选择日期范围",
      type: "range",
      defaultValue: [new Date(pagingParams.startTime), new Date(pagingParams.endTime)],
      template: "YYYY-MM-DD"
    }).then((res) => {
      setPagingParams({
        endTime: res[1],
        startTime: res[0],
      })
      initPagingQuery(false)
    })
  }
  useEffect(() => {
    // 获取当前用户登录信息
    initPagingQuery(false)
  }, [])
  return <>
    <View className="wallet-nav">
      <Navbar showIcon={true} titleClassName="wallet-nav-title" title={'积分明细'} />
    </View>
    <Tabs value={pagingParams.type} onChange={changeType} swipeable={true} className="tabs">
      <Tabs.TabPane value={''} title="全部" />
      <Tabs.TabPane value={0} title="收入" />
      <Tabs.TabPane value={1} title="支出" />
    </Tabs>
    <View onClick={onSetTime} className="wallet-header-time">
      {pagingParams.startTime}至{pagingParams.endTime}
    </View>
    <XmPullRefresh className="wallet-box" navigationStyle="custom" refresherLoading={pagingInfo.refresherLoading} onRefresh={initPagingQuery} onToLower={loadPagingMore}>
      <View className="wallet-list">
        {pagingInfo.list.map((item) => (
          <Flex align="center" className="wallet-list-btm">
            <Flex.Item span={18}>
              <Flex>
                <Flex.Item span={6}>
                  <View className="wallet-list-imgbox">
                    <XmImage className="wallet-list-img" src={item.img} static />
                  </View>
                </Flex.Item>
                <Flex.Item span={16}>
                  <View className="wallet-list-title">{item.title}</View>
                  <View className="wallet-list-content">{item.createTime}</View>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item span={6}>
              {item.type == 1 ? <View className="wallet-list-credit">-{item.integral}</View> :
                <View className="wallet-list-credit wallet-list-add">+{item.integral}</View>
              }
            </Flex.Item>
          </Flex>

        ))}
      </View>
      {pagingInfo.list.length == 0 ?
        <XmNoData {...pagingInfo} title="暂无数据" /> : <></>
      }

    </XmPullRefresh>
    <View className="wallet-list">

    </View>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
